<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 查询</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form ref="form" :model="form" label-width="110px" label-position="left" >
                <el-row :gutter="20">
                    <el-col :span="12"><div class="grid-content bg-purple">
                        <el-form-item label="车牌号">
                            <el-input class="handle-input" v-model="form.carno"></el-input>
                        </el-form-item>
                        <el-form-item label="版本号">
                            <el-select class="handle-select" v-model="form.version" clearable placeholder="请选择">
                                <el-option
                                        v-for="item in versionselectList"
                                        :key="item.id"
                                        :label="item.version"
                                        :value="item.version"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                    </div></el-col>


                    <el-col :span="12"><div class="grid-content bg-purple-light" >
                        <el-form-item label="开始时间">
                            <el-col :span="11">
                                <el-date-picker type="datetime" placeholder="选择起始时间" v-model="form.starttime" class="handle-input" ></el-date-picker>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="结束时间">
                            <el-col :span="11">
                                <el-date-picker type="datetime" placeholder="选择结束时间" v-model="form.endtime" class="handle-input" ></el-date-picker>
                            </el-col>
                        </el-form-item>

                        <!--<el-form-item label="GPS终端号">-->
                        <!--<el-input class="handle-input" v-model="form.gpsnum"></el-input>-->
                        <!--</el-form-item>-->
                        <el-button type="primary" icon="delete" style="margin-left: 30% ;margin-top: 8%" class="mr10" @click="search">查询</el-button>
                        <el-button type="primary" icon="delete" style="margin-top: 8%" class="mr10" @click="all">显示全部</el-button>

                    </div>
                    </el-col>
                </el-row>



            </el-form>
            <el-table :data="tableData" border  v-loading="listLoading" class="table" stripe>
                <el-table-column prop="carno" label="车牌号" >
                </el-table-column>
                <el-table-column prop="version" label="版本号" >
                </el-table-column>
                <el-table-column prop="starttime" label="开始时间" >
                </el-table-column>
                <el-table-column prop="endtime" label="结束时间" >
                </el-table-column>
                <el-table-column prop="usetimes" label="用时（分钟）" >
                </el-table-column>
            </el-table>
            <el-col :span="24" class="toolbar pageBar">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pageSize"
                        layout=" prev, pager, next, sizes, total"
                        :total="total">
                </el-pagination>
            </el-col>
        </div>
    </div>
</template>



<script>
    export default {
        name: 'SearchFile',
        data() {
            return {
                // url: 'http://localhost:9090',
                url:"/api",
                tableData: [],
                addData1:[],
                addData2:[],
                currentPage: 1,
                total: 0,
                page: 1,
                pageSize: 10,
                pageNum:1,
                totalnum:0,
                totalpage:1,
                versionselectList:[],
                select_cate: '',
                select_word: '',
                del_list: [],
                is_search: false,
                listLoading: false,
                isshow:false,
                chartVisible:false,
                form: {
                    starttime: '',
                    carno: '',
                    endtime: '',
                    version:''
                },
            }



        },
        created() {
            this.getData();
            this.$axios({
                method: 'get',
                url: this.url+"/paramfile/list",
            }).then((res) => {
                this.versionselectList = res.data;
            });
        },

        methods: {

            //改变时
            handleSizeChange(val) {
                this.pageSize = val;
                console.log(this.pageSize);
                this.getData();
            },
            //条目改变时
            handleCurrentChange(val) {
                this.pageNum = val;
                console.log(this.pageNum);
                this.getData();
            },

            //获取列表数据
            getData() {
                this.listLoading = true;

                this.$axios({
                    method: 'post',
                    url: this.url+"/record/all?pageNum="+this.pageNum+"&pageSize="+this.pageSize,
                    data:this.form
                }).then((res) => {
                    this.tableData = res.data.list;
                    this.total = res.data.totalnum;
                    this.page = res.data.totalpage;
                    this.listLoading = false;
                });




            },
            search(){
                this.is_search = true;
                this.getData();
            },
            closeDialog(){
                this.chartdata = [];
            },

            all(){
                    this.is_search = false;
                    this.form.version = "";
                    this.form.carno = "";
                    this.form.starttime = "";
                    this.form.endtime = "";
                    this.getData();


            },
            filterTag(value, row) {
                return row.tag === value;
            }
        }
    }

</script>

<style>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 300px;
    }
    .handle-add-select {
        width: 200px;
    }
    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .handle-add-input {
        width: 200px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        margin-top: 10px;
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
        width: 80px;
    }
    .customWidth{
        width:80%;
    }
    .schart{
        width: 500px;
        height: 400px;
    }
    .content-title{
        clear: both;
        font-weight: 400;
        line-height: 50px;
        margin: 10px 0;
        font-size: 22px;
        color: #1f2f3d;
    }

</style>
